<template>
  <div :data="blogData" class="about_end">
    <div class="img_top">
      <img width="100%" height="195.41px" src="../../static/img/page_classify.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">后端开发</div>
      </div>
      <P class="about_p">不要轻易放弃。学习成长的路上，我们长路漫漫，只因学无止境。</P>
    </div>
    <div class="bor">
    <div class="bloginfo">
        <div class="newsview">
        <h3 class="news_title">{{blogData.title}}</h3>
      </div>
      <ul>
        <li class="el-icon-user-solid">
          <span class="iconfont">
            <a href="javascript:void(0);" @click="zuoze()">{{blogData.author}}</a>
          </span>
        </li>
        <li class="el-icon-menu">
          <span class="iconfont">
            <a href="javascript:void(0);" @click="fenlei()">{{sortData.sortName}}</a>
          </span>
        </li>
        <li class="el-icon-timer">
          <span class="iconfont">{{blogData.createTime}}</span>
        </li>
        <li class="el-icon-view">
          <span class="iconfont">{{blogData.clickCount}}</span>
        </li>
        <li class="el-icon-star-on">
          <span class="iconfont">{{dianzanData.collectCount}}</span>
        </li>
      </ul>
      <div class="tags">
        <a href="javascript:void(0);" target="_blank">{{tagData.content}}</a>
      </div>
      <div class="news_about">
        <strong>版权:本文为蘑菇博客原创文章，转载无需和我联系，但请注明来自蘑菇博客 http://www.moguit.cn</strong>
      </div>
      <div class="news_con" v-html="blogData.content">
        {{blogData.content}}
      </div>
      <div class="share">
        <p class="diggit">
          <a href="javascript:void(0);" @click="dianzan()">很赞哦!</a>
          <span></span>
        </p>
        <p class="dasbox">
            <a href="javascript:void(0);" @click="dashang">打赏文章</a>
        </p>
      </div>
      <div class="otherlink">
        <div class="mess">
          <p class="mess_tit">相关文章</p>
        </div>
        <ul>
          <li v-for="item in blogData1">
            <a href="javascript:void(0);" @click="goToInfo(item.uid)">{{item.title}}</a>
          </li>
        </ul>
      </div>

      <div class="news_pl">
        <div class="mess_1">
          <p class="mess_tit">文章评论</p>
        </div>
        <ul>
          <div>
            <div class="commentBox">
              <span class="left">
                <img src="../assets/defaultAvatar.png" />
              </span>
              <span class="right">
                <textarea id="textpanel" placeholder="既然来了,那就留下些什么吧" class="textArea"></textarea>
              </span>
            </div>
            <div class="bottom">
              <button type="button" class="el-button submit p2 el-button--primary">
                <span>发送评论</span>
              </button>
              <button type="button" class="el-button cancel p2 el-button--info">
                <span>取消评论</span>
              </button>
              <span class="allow p2">还能输入1024个字符</span>
            </div>
          </div>
        </ul>
      </div>
  </div>
    </div>
    </div>

</template>

<script>
  import axios from 'axios'
export default {
  data() {
    return {

      blogData:{
        //uid :'0231f82f169c4398ff695d8260694dd7'
      },
      tagData:{},
      sortData:{},
      blogData1:{},
      dianzanData:{},
      reverse: true,

    };
  },
  methods:{
    getBlogByUid: function () {
      //alert(this.blogData.uid);
      var uid = this.$route.params.uid;
      var _this = this;
      axios.get("/api/blogs/getBlogByUid/"+uid).then(function (res) {
        _this.blogData = res.data;
      })
    },
    getBlogContentByUid: function () {
      var uid = this.$route.params.uid;
      var _this = this;
      axios.get("/api/blogs/getBlogContentByUid/"+uid).then(function (res) {
        _this.tagData = res.data;
      })
    },
    getBlogSortContentByUid: function(){
      var uid = this.$route.params.uid;
      var _this = this;
      axios.get("/api/blogs/getBlogSortContentByUid/"+uid).then(function (res) {
        _this.sortData = res.data;
      })
    },
    getBlogTitle: function () {
      var _this = this;
      axios.get("/api/blogs/getBlogTitle").then(function (res) {
        _this.blogData1 = res.data;
      })
    },
    getBlogPraiseCountByUid: function(){
      var uid = this.$route.params.uid;
      var _this = this;
      axios.get("/api/blogs/getBlogPraiseCountByUid/"+uid).then(function (res) {
        _this.dianzanData = res.data;
      })
    },
    dianzan: function () {
      var uid = this.$route.params.uid;
      var _this = this;
      axios.get("/api/blogs/praiseBlogByUid/"+uid).then(function (res) {
        if (res.data = "success"){
          alert("点赞成功!");
        }else {
          alert("网络错误,请重试!")
        }
      })
    },
    zuoze:function () {

    },
    fenlei:function () {

    },
    dashang:function () {
      var uid = this.$route.params.uid;
      var _this = this;
      axios.get("/api/pay/blog/"+uid).then(function (res) {
        //跳转支付宝支付页面
        const div=document.createElement('divform');
        div.innerHTML=res.data; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit();
        //_this.$router.push('/Message')
      })
    }
  },
  mounted:function () {
    this.getBlogByUid();
    this.getBlogContentByUid();
    this.getBlogSortContentByUid();
    this.getBlogTitle();
    this.getBlogPraiseCountByUid();
  }
};
</script>

<style>
.iconfont {
  font-size: 14px;
  margin-right: 3px;
}
.about {
  width: 80%;
  height: 60px;
  margin-left: 10%;
  background-color: #f6f6f6;
  border-bottom: 1px #000 solid;
}
.about_end {
  width: 80%;
  margin-left: 10%;
  height: 7300px;
  background-color: #f6f6f6;
}
.about_btn {
  position: absolute;
  left: 160px;
  top: 310px;
}
.about_p {
  float: right;
  margin-right: 30px;
  line-height: 40px;
}
.about_mess1 {
  width: 100px;
  height: 40px;
  background-color: #000000;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.about_mess2 {
  width: 100px;
  height: 40px;
  background-color: #3a6ab5;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.end_left {
  width: 230px;
  height: 380px;
  position: absolute;
  left: 159px;
}
.end_right {
  width: 970px;
  height: 1000px;
  position: absolute;
  right: 160px;
}
.mess_tit {
  float: left;
  margin-top: 4px;
  margin-left: 40px;
}
.mess {
  border-bottom: 2px solid #000;
  height: 30px;
  width: 100%;
  background: url()
    left 10px center no-repeat;
}
.mess_1 {
  border-bottom: 2px solid #000;
  height: 30px;
  width: 100%;
  background: url()
    left 10px center no-repeat;

}
.bloginfo {
  width: 80%;
  height: 1000px;
  background-color: white;
  margin-left: 10%;
}
.bor {
  width: 100%;
  height: 1000px;
  background-color: #f6f6f6;
}
a,
a:hover {
  text-decoration: none;
}
/*li,*/
/*ul {*/
/*  list-style: none;*/
/*}*/
h1.t_nav {
  border-bottom: 1px solid #bfbfbf;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}
/* *{
    margin:0;
    padding: 0;
} */
.newsview {
  padding: 0 30px;
}
.news_title {
  font-size: 24px;
  padding: 30px 0 0;
  color: #333;
}
.tags {
  margin: 0;
}
.tags a {
  background: #f4650e;
  padding: 3px 8px;
  margin: 0 5px 0 0;
  color: #fff;
}
.news_about {
  color: #888;
  border: 1px solid #f3f3f3;
  padding: 10px;
  margin: 20px auto 15px;
  line-height: 23px;
  background: none repeat 0 0 #f6f6ff;
}
.news_con {
  line-height: 1.8;
  font-size: 16px;
  text-align: justify;
}
.share {
  padding: 20px;
  overflow: hidden;
}
.diggit,
.diggit a {
  color: #fff;
}
.diggit {
  float: left;
  width: 140px;
  background: #e2523a
    url()
    no-repeat center left 10px;
  box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  line-height: 40px;
  text-align: center;
  padding-left: 10px;
  margin-left: 20%;
}
.dasbox,
.dasbox a {
  color: #fff;
}
.dasbox {
  width: 130px;
  float: left;
  margin-left: 40px;
  background: url()
    no-repeat left 20px center #e2523a;
  box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  line-height: 40px;
  padding-left: 10px;
  text-align: center;
}
.otherlink {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
}
.otherlink h2 {
  border-bottom: 2px solid #000;
  line-height: 40px;
  font-size: 14px;
  padding-left: 40px;
  color: #000;
}
.otherlink ul {
  margin: 10px 0;
}
.news_pl {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
}
.news_pl h2 {
  border-bottom: 2px solid #000;
  line-height: 40px;
  font-size: 14px;
  padding-left: 30px;
  color: #000;
}
.commentBox {
  min-width: 700px;
  width: 100%;
  height: 100px;
  margin: 0 auto;
}
.commentBox .left {
  display: inline-block;
  width: 4%;
  height: 100%;
  padding-top: 3px;
}
.commentBox .left img {
  cursor: pointer;
  margin: 0 auto;
  width: 90%;
  border-radius: 50%;
}
img {
  border: 0;
  display: block;
}
.commentBox .right {
  display: inline-block;
  margin: 5px 2px 0 0;
  width: 95%;
  height: 100%;
}
.commentBox .right textarea {
  color: #606266;
  padding: 10px 5px 5px 10px;
  resize: 95%;
  height: 100%;
}
.bottom {
  position: relative;
  min-width: 690px;
  width: 98%;
  height: 60px;
  line-height: 40px;
  margin-top: 20px;
}
.bottom .p2 {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}
.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.el-button--info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
textarea {
  width: 1350px;
  height: 110px;
}
</style>
